<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>服务评论列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<blockquote class="layui-elem-quote list_search">
    <div class="layui-inline">
        <button class="layui-btn" id="addMenu">添加服务</button>
        <button class="layui-btn" id="editMenu">编辑服务</button>
        <a class="layui-btn layui-btn-danger batchDel"
           data-type="delCheckData"><i class="layui-icon">&#xe640;</i>批量删除</a>
        <button class="layui-btn layui-btn-primary">（不选中为添加顶级服务，选中添加子服务）</button>
    </div>
</blockquote>
<script type="text/html" id="sratus">
    <input type="checkbox" name="id" value="{{d.id}}" title="审核通过" lay-filter="lockStatus" {{ d.status == 1 ?'checked' : '' }}>
</script>
<table id="dynamicList" lay-filter="dynamicList" class="layui-hidden"></table>
<script th:src="@{/src/layui.js}"></script>
<script type="text/html" id="tableImg">
    <img src="{{d.serverImg }}" style="height:100%;width:100%;"/>
</script>
<script>
    layui.config({
        base:'/src/app/'
    }).use(['jquery','layer','laypage','laytpl','table','laydate','treeGrid','form'],function () {
        var $ = layui.jquery,
            treeGrid = layui.treeGrid,
            layer = layui.layer,
            laypage = layui.laypage,
            laytpl = layui.laytpl,
            form = layui.form,
            table = layui.table,laydate = layui.laydate;
        treeGrid.render({
            elem:'#dynamicList',
            url:'/server/menuList',
            title:'服务列表',
            cellMinWidth:80,
            treeId:'id',
            treeUpId:'parentId',
            treeShowName:'serverName',
            cols:[
                [
                    {type:'checkbox'},
                    {title:'服务菜单',field:'serverName'},
                    {title:'服务图片',field:'serverImg',templet:'#tableImg',width:90},
                    {title:'服务描述',field:'description'},
                    {title:'创建时间',field:'createTime'},
                    {title:'更新时间',field:'createTime'},
                    {title:'审核状态',field:'status',templet:'#sratus'},
                    {title:'创建人',field:'creator'}
                ]
            ],
            page:false
        });
        //监听锁定事件
        form.on('checkbox(lockStatus)',function (data) {
            var id = data.elem.value;
            var status = data.elem.checked?1:0;
            $.ajax({
                url:'/server/checkMenu',
                data:{id:id,status:status},
                type:'put',
                dataType:'json',
                success:function (res) {
                    if(res.code == 200){
                        layer.msg('更新成功',{icon:1,time:1000},function () {
                            table.reload('dynamicList',{});
                        })
                    }else{
                        layui.msg('更新失败',{icon:5})
                    }
                }
            })
        })


        //添加服务
        $("#addMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('dynamicList');
            var data  = checkStatus.data;//获取选中行的数据
            if(data.length>1){
                layer.msg('只能选择一条数据',{icon:5});
                return ;
            }
            var parentId;

            if(data != ''){
                //获取当前行的节点服务的Id
                parentId = data[0].id;
            }
            //如果没有勾选复选框，默认id的值为0；即是根节点。
            parentId = parentId==undefined?0:parentId;

            layer.open({
                type:2,
                title:'添加服务',
                area:['400px','500px'],
                content:'/server/addServerMenu?parentId='+parentId
            })
        })

        //编辑服务
        $('#editMenu').click(function () {
            var checkStatus = treeGrid.checkStatus('dynamicList');
            var data = checkStatus.data;
            if (data.length > 1){
                layer.msg('只能选择一条数据',{icon:5});
                return ;
            }
            if (data.length < 1){
                layer.msg('请选择一条数据',{icon:5});
                return ;
            }
            //获取服务id
            var menuId = data[0].id;
            layer.open({
                type:2,
                area:['400px','500px'],
                title:'编辑菜单',
                content:'/server/editMenu?id='+menuId
            })
        })
        //批量删除
        $('.batchDel').click(function () {
            //获取选中的数据
            var checkStatus = treeGrid.checkStatus('dynamicList');
            var data = checkStatus.data;
            if (data.length == 0){
                layer.msg("请选择服务数据",{icon:5});
                return ;
            }
            var ids = '';
            $.each(data,function (index , comment) {//遍历数组，取出动态id
                if (index == data.length - 1){
                    ids += comment.id;
                } else {
                    ids += comment.id + ',';
                }
            })
            $.ajax({
                url:'/server/batchDel',
                type:'delete',
                data:{'ids':ids},//传id字符串到后端
                dataType:'json',
                success : function (result) {
                    if (result.code == 200){
                        layer.msg(result.message,{icon:1},function () {
                            location.reload();
                        })
                    }else {
                        layer.msg(result.message,{icon:5});
                    }
                }
            })

        })
        //监听表格的行工具事件
        treeGrid.on('tool(dynamicList)',function (row) {
            var data = row.data;
            if(row.event === 'del'){
                layer.confirm("确定删除吗？",function (index) {
                    $.ajax({
                        url:'/comment/del?type=2',
                        type:'delete',
                        data:{'id':data.id},
                        dataType:'json',
                        success:function (result) {
                            if (result.code == 200){
                                layer.msg(result.message,{icon:1},function () {
                                    location.reload();//删除成功刷新页面
                                });
                            } else {
                                layer.msg(result.message,{icon:5});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        })




    })
</script>

</body>
</html>